<template>
	<view :class="{'page-box':true,bottom: !disabled, readBottom: status == 'read' }">
		<view class="input-box">
			<view class="input-box-title">基础信息</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>合同编号</view>
				<view class="input-icon">
					<input class="input" v-model="form.hetong_sn" :disabled="disabled"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>发车时间</view>
				<view class="input-icon">
					<view class="input">
						<picker mode="date" :value="form.fache_time" :start="startDate" :disabled="disabled" :end="endDate" @change="fache_timeChange">
							<view class="uni-input">{{form.fache_time}}</view>
						</picker>
					</view>
					<view :class="{ 'icon iconfont icon-youjiantou': true, 'hide': disabled }"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>中国车牌号</view>
				<view class="input-icon">
					<input class="input" v-model="form.chnia_chehao" :disabled="disabled"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>换头车号</view>
				<view class="input-icon">
					<input class="input" v-model="form.huantou_chehao" :disabled="disabled"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label">司机挂牌</view>
				<view class="input-icon">
					<input class="input" v-model="form.sijiguapai" :disabled="disabled"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>件数</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.jianshu" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>清关重量</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.qingguanzhongliang" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>销售时间</view>
				<view class="input-icon">
					<view class="input">
						<picker mode="date" :value="form.xiaoshoutime" :start="startDate" :disabled="disabled" :end="endDate" @change="xiaoshoutimeChange">
							<view class="uni-input">{{form.xiaoshoutime}}</view>
						</picker>
					</view>
					<view :class="{ 'icon iconfont icon-youjiantou': true, 'hide': disabled }"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>名称</view>
				<view class="input-icon">
					<input class="input" v-model="form.name" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>过桥费用</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.guoqiao_price" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label">清关费用</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.qingguan_price" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label">打冷费用</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.daleng_price" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label">人工费用</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.rengong_price" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label">代卖费用</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.daimai_price" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label">越南费用总计</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.zongji_price" :disabled="true" placeholder="" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item" v-if="status == 'read'">
				<view class="label">销售抹零</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.molingzongji" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item" v-if="status == 'read'">
				<view class="label">销售总金额</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.xiaoshou_pricecount" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			
			<view class="input-item" v-if="status == 'read'">
				<view class="label">支付费用</view>
				<view class="input-icon">
					<input class="input" type="digit" v-model="form.zhichu_price" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
		</view>
		
		<view v-if="status == 'read'" class="order-item-box">
			<view class="order--item-wrapper" v-for="(item,index) in lists" :key="index">
				<uni-swipe-action>
					<!-- 使用插槽 （请自行给定插槽内容宽度）-->
					<uni-swipe-action-item>
						<view class="order-item">
							<view class="pingming">{{ item.pingming }}</view>
							<view class="createtime">创建时间: {{item.createtime}}</view>
							<view class="createtime">仓库: {{item.cangkuname}}</view>
							<view class="baojianshu-xiaoliang-danjia">
								<view class="baojianshu">报件数: {{item.baojianshu}}</view>
								<view class="xiaoliang">销量: {{item.xiaoliang}}</view>
								<view class="danjia">单价: {{item.danjia}}</view>
								<view class="danjia">客户抹零: {{item.kehumoling}}</view>
							</view>
							<view class="xiaoshou_price">销售总额: {{item.xiaoshou_price}}</view>
							<view class="beizhu">备注: {{item.beizhu}}</view>
						</view>
						
						<template v-slot:right>
							<view class="swipe-btn" v-if="ordersn && ( status == 'read' ) ">
								<view class="edit-btn" @click.stop="editItemFun(item)">
									编辑
								</view>
								<view class="del-btn" @click.stop="delItemFun(item.id)">
									删除
								</view>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
				
			</view>
		</view>
		
		<view v-if="ordersn && ( status == 'read' )" class="order-item-add-box" @click="addItem">
			<view class="order-item-add">+ 新增订单条目</view>
		</view>
		
		<view class="bottom-btn" v-if="!disabled">
				<button type="primary" class="btn-confirm" size="mini" @click="confirmFun">保存</button>
		</view>
		
		<uni-popup ref="itemPopup" type="bottom" background-color="#fff">
			<view class="input-box">
				<view class="input-item">
					<view class="label"><text class="must">*</text>仓库</view>
					<view class="input-icon">
						<view class="input">
							<picker :value="listForm.cangkuid" :range="cangkus" range-key="label" @change="cangkuChange">
								<view class="uni-input">{{cangkus[listForm.cangkuid]?.label}}</view>
							</picker>
						</view>
						<view class="icon iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-item">
					<view class="label"><text class="must">*</text>品名</view>
					<view class="input-icon">
						<input class="input" v-model="listForm.pingming" placeholder="请输入内容" />
						<view class="icon hide iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-item">
					<view class="label"><text class="must">*</text>报件数</view>
					<view class="input-icon">
						<input class="input" type="digit" v-model="listForm.baojianshu" placeholder="请输入内容" />
						<view class="icon hide iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-item">
					<view class="label"><text class="must">*</text>销量</view>
					<view class="input-icon">
						<input class="input" type="digit" v-model="listForm.xiaoliang" placeholder="请输入内容" />
						<view class="icon hide iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-item">
					<view class="label"><text class="must">*</text>单价</view>
					<view class="input-icon">
						<input class="input" type="digit" v-model="listForm.danjia" placeholder="请输入内容" />
						<view class="icon hide iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-item">
					<view class="label"><text class="must">*</text>客户抹零</view>
					<view class="input-icon">
						<input class="input" type="digit" v-model="listForm.kehumoling" placeholder="请输入内容" />
						<view class="icon hide iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-item">
					<view class="label"><text class="must">*</text>销售总额</view>
					<view class="input-icon">
						<input class="input" v-model="listForm.xiaoshou_price" :disabled="true" placeholder="请输入内容" />
						<view class="icon hide iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-item">
					<view class="label">备注</view>
					<view class="input-icon">
						<input class="input" v-model="listForm.beizhu" placeholder="请输入内容" />
						<view class="icon hide iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-save-box">
					<view class="input-save" @click="saveItem">保存</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
	    onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import { ref,watch } from "vue"
	import { GetOrderDetile, CreateOrder, EditOrder, CreateOrderItem, EditOrderItem, DeleteOrderItem } from "@/configure/api/order.js"
	import { showErrMsg, showSuccessMsg } from "@/utils/msg";
	import { getUserInfo } from "@/utils/getUserInfo.js"
	import { validatePlusFloatWithTwo } from "@/utils/validate.js";
	import { GetCangkuList } from "@/configure/api/cangku.js"
	
	const form = ref({
		id: '',
		hetong_sn: '',
		fache_time: '',
		chnia_chehao: '',
		huantou_chehao: '',
		sijiguapai: '',
		jianshu: '',
		qingguanzhongliang: '',
		xiaoshoutime: '',
		name: '',
		guoqiao_price: '',
		qingguan_price: 0,
		daleng_price: 0,
		rengong_price: 0,
		daimai_price: 0,
		zongji_price: 0,
		zhichu_price: 0,
		xiaoshou_pricecount: 0
	})
	
	const confirmFun = async() => {
		let { 
			id, 
			hetong_sn,
			fache_time,
			chnia_chehao,
			huantou_chehao,
			sijiguapai,
			jianshu,
			qingguanzhongliang,
			xiaoshoutime,
			name,
			guoqiao_price,
			qingguan_price,
			daleng_price,
			rengong_price,
			daimai_price,
			zongji_price,
			zhichu_price
		} = form.value;

		let opt = {
			hetong_sn,
			fache_time,
			chnia_chehao,
			huantou_chehao,
			sijiguapai,
			jianshu,
			qingguanzhongliang,
			xiaoshoutime,
			name,
			guoqiao_price,
			qingguan_price: qingguan_price || 0,
			daleng_price: daleng_price || 0,
			rengong_price: rengong_price || 0,
			daimai_price: daimai_price || 0,
			zongji_price: zongji_price || 0,
			zhichu_price: zhichu_price || 0
		}
		
		if(status.value == 'add'){
			opt.id = userInfo.value.id // 销售员id
		}else if(status.value == 'edit'){
			opt.id = id
		}
		
		
		if(!hetong_sn){
			showErrMsg(`请输入合同编号!`)
			return
		}
		
		if(!fache_time){
			showErrMsg(`请选择发车时间!`)
			return
		}
		
		if(!chnia_chehao){
			showErrMsg(`中国车牌号!`)
			return
		}
		
		if(!huantou_chehao){
			showErrMsg(`请输入换头车号!`)
			return
		}
		
		if(!jianshu){
			showErrMsg(`请输入件数!`)
			return
		}else if(!validatePlusFloatWithTwo(jianshu)){
			showErrMsg(`件数必须为正数字!`)
			return
		}
		
		if(!qingguanzhongliang){
			showErrMsg(`请输入清关重量!`)
			return
		}
		
		if(!xiaoshoutime){
			showErrMsg(`请选择销售时间!`)
			return
		}
		
		if(!name){
			showErrMsg(`请输入名称!`)
			return
		}
		
		if(!guoqiao_price){
			showErrMsg(`请输入过桥费用!`)
			return
		}else if(!validatePlusFloatWithTwo(guoqiao_price)){
			showErrMsg(`过桥费用必须为正数字!`)
			return
		}
		
		// if(!qingguan_price){
		// 	showErrMsg(`请输入清关费用!`)
		// 	return
		// }else 
		if(qingguan_price && !validatePlusFloatWithTwo(qingguan_price)){
			showErrMsg(`清关费用必须为正数字!`)
			return
		}
		
		// if(!daleng_price){
		// 	showErrMsg(`请输入打冷费用!`)
		// 	return
		// }else 
		if(daleng_price && !validatePlusFloatWithTwo(daleng_price)){
			showErrMsg(`打冷费用必须为正数字!`)
			return
		}
		
		// if(!rengong_price){
		// 	showErrMsg(`请输入人工费用!`)
		// 	return
		// }else 
		if(rengong_price && !validatePlusFloatWithTwo(rengong_price)){
			showErrMsg(`人工费用必须为正数字!`)
			return
		}
		
		// if(!daimai_price){
		// 	showErrMsg(`请输入代卖费用!`)
		// 	return
		// }else 
		if(daimai_price && !validatePlusFloatWithTwo(daimai_price)){
			showErrMsg(`代卖费用必须为正数字!`)
			return
		}
		
		// if(!zongji_price){
		// 	showErrMsg(`请输入越南费用总计!`)
		// 	return
		// }else if(!validatePlusFloatWithTwo(zongji_price)){
		// 	showErrMsg(`越南费用总计必须为正数字!`)
		// 	return
		// }
		
		// if(!zhichu_price){
		// 	showErrMsg(`请输入支出费用!`)
		// 	return
		// }else if(!validatePlusFloatWithTwo(zhichu_price)){
		// 	showErrMsg(`请输入正确的数字!`)
		// 	return
		// }

		if(status.value == 'add'){
			let res = await CreateOrder(opt);
			if(res.code == 200){
				showSuccessMsg("创建成功!");
				uni.navigateBack({
					delta: -1
				});
			}
		} else if(status.value == 'edit'){
			let res = await EditOrder(opt);
			if(res.code == 200){
				showSuccessMsg("编辑成功!");
				uni.navigateBack({
					delta: -1
				});
			}
		}
		
	}
	
	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 3;
		} else if (type === 'end') {
			year = year + 5;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	
	const startDate = ref()
	const endDate = ref()
	const initFun = (order_sn) => {
		form.value.fache_time = getDate();
		form.value.xiaoshoutime = getDate();
		startDate.value = getDate('start');
		endDate.value = getDate('end');
		if(order_sn){
			getDetail(order_sn)
		}
	}
	initFun()
	
	// 发车时间
	const fache_timeChange = (e) => {
		form.value.fache_time = e.detail.value;
	}
	
	// 销售时间
	const xiaoshoutimeChange = (e) => {
		form.value.xiaoshoutime = e.detail.value;
	}
	
	const status = ref('add')
	const disabled = ref(false)
	const userInfo = ref()
	const ordersn = ref('')
	onLoad((detail)=>{
		let { state, order_sn } = detail
		
		initFun(order_sn)
		
		GetCangkuListFun()
		
		ordersn.value = order_sn
		
		status.value = state
				
		disabled.value = ( state == 'read' )
		
		getUserInfo().then((res)=>{
			userInfo.value = res;
		})
	})
	
	onShow(()=>{
		
	})
	
	const selectSiji = () => {
		uni.navigateTo({url:`/pages/me/siji/selectSiJi/selectSiJi`})
	}
	
	const getDetail = async(orderSn) => {
		let res = await GetOrderDetile({order_sn: orderSn});
		let {
			id, 
			hetong_sn,
			fache_time,
			chnia_chehao,
			huantou_chehao,
			sijiguapai,
			jianshu,
			qingguanzhongliang,
			xiaoshoutime,
			name,
			guoqiao_price,
			qingguan_price,
			daleng_price,
			rengong_price,
			daimai_price,
			zongji_price,
			zhichu_price,
			molingzongji,
			xiaoshou_pricecount,
			list,
			order_sn
		} = res.data;
		if(res.code == 200){
			form.value = {
				id,
				hetong_sn,
				fache_time: fache_time.split(" ")[0],
				chnia_chehao,
				huantou_chehao,
				sijiguapai,
				jianshu,
				qingguanzhongliang,
				xiaoshoutime: xiaoshoutime.split(" ")[0],
				name,
				guoqiao_price,
				qingguan_price,
				daleng_price,
				rengong_price,
				daimai_price,
				zongji_price,
				zhichu_price,
				molingzongji,
				xiaoshou_pricecount
			}
			
			lists.value = list
			
			ordersn.value = order_sn
		}
	}
	
	const itemPopup = ref()
	const lists = ref([])
	const listForm = ref({
		cangkuid: 0,
		pingming: '',
		baojianshu: '',
		xiaoliang: '',
		danjia: '',
		kehumoling: 0,
		xiaoshou_price: '',
		beizhu: ''
	})
	const itemStatus = ref('add')
	const addItem = () => {
		
		itemPopup.value.open()
		itemStatus.value = 'add'
		let { name, jianshu } = form.value
		listForm.value = {
			cangkuid: 0,
			pingming: name ,
			baojianshu: jianshu,
			xiaoliang: '',
			danjia: '',
			kehumoling: 0,
			xiaoshou_price: '',
			beizhu: ''
		}
	}
	
	const cangkus = ref([])
	const GetCangkuListFun = async () => {
		let res = await GetCangkuList();
			res = res.data;
		// debugger
		if(res.length){
			cangkus.value = res.map(v=>{
				return{
					label: v.name,
					value: v.id
				}
			})
		}
	}
	const cangkuChange = (e) => {
		listForm.value.cangkuid = e.detail.value
	}
	
	const editItemFun = (item) => {
		let {
			id,
			cangkuid,
			pingming,
			baojianshu,
			xiaoliang,
			danjia,
			kehumoling,
			xiaoshou_price,
			beizhu
		} = item
		itemPopup.value.open()
		itemStatus.value = 'edit'
		
		cangkus.value.forEach((v,i)=>{
			if(v.value == cangkuid){
				cangkuid = i
			}
		})
		
		listForm.value = {
			id,
			cangkuid,
			pingming,
			baojianshu,
			xiaoliang,
			danjia,
			kehumoling,
			xiaoshou_price,
			beizhu
		}
	}
	
	const delItemFun = (id) => {
		uni.showModal({
		    title: '提示',
		    content: '确认删除?',
		    success: async function (res) {
		        if (res.confirm) {
					
					let res = await DeleteOrderItem({id})
					if(res.code == 200){
						showSuccessMsg("删除成功!");
						getDetail(ordersn.value)
					}
					
		        } else if (res.cancel) {
		            
		        }
		    }
		});
	}
	
	const saveItem = async() => {
			
		let {
			id, 
			cangkuid,
			pingming,
			baojianshu,
			xiaoliang,
			danjia,
			kehumoling,
			xiaoshou_price,
			beizhu
		} = listForm.value;
		
		if(!pingming){
			showErrMsg(`请输入品名!`)
			return
		}
		
		if(!baojianshu){
			showErrMsg(`请输入报件数!`)
			return
		}else if(!validatePlusFloatWithTwo(baojianshu)){
			showErrMsg(`报件数必须为正数字!`)
			return
		}
		
		
		if(!xiaoliang){
			showErrMsg(`请输入销量!`)
			return
		}else if(!validatePlusFloatWithTwo(xiaoliang)){
			showErrMsg(`销量必须为正数字!`)
			return
		}
		
		if(!danjia){
			showErrMsg(`请输入单价!`)
			return
		}else if(!validatePlusFloatWithTwo(danjia)){
			showErrMsg(`单价必须为正数字!`)
			return
		}
		
		if(!xiaoshou_price){
			showErrMsg(`请输入销售总额!`)
			return
		}else if(!validatePlusFloatWithTwo(xiaoshou_price)){
			showErrMsg(`销售总额必须为正数字!`)
			return
		}
		
		if(kehumoling && !validatePlusFloatWithTwo(kehumoling)){
			showErrMsg(`客户抹零必须为正数字!`)
			return
		}
		
		
		// if(!beizhu){
		// 	showErrMsg(`请输入备注!`)
		// 	return
		// }
		
		let opt = {
			cangkuid: cangkus.value[cangkuid]?.value,
			cangkuname: cangkus.value[cangkuid]?.label,
			pingming,
			baojianshu,
			xiaoliang,
			danjia,
			kehumoling,
			xiaoshou_price,
			beizhu
		}
		
		if(itemStatus.value == 'add'){
			opt.order_sn = ordersn.value
			let res = await CreateOrderItem(opt);
			if(res.code == 200){
				showSuccessMsg("创建成功!");
				itemPopup.value.close()
				getDetail(ordersn.value)
			}
		} else if(itemStatus.value == 'edit'){
			opt.id = id;
			let res = await EditOrderItem(opt);
			if(res.code == 200){
				showSuccessMsg("编辑成功!");
				itemPopup.value.close()
				getDetail(ordersn.value)
			}
		}
	}
	
	const sumZongji = () => {
		let { guoqiao_price, qingguan_price, daleng_price, rengong_price, daimai_price } = form.value
		let zongji_price = 0
		if(validatePlusFloatWithTwo(guoqiao_price)){
			zongji_price = zongji_price + parseFloat(guoqiao_price)
		}
		
		if(validatePlusFloatWithTwo(qingguan_price)){
			zongji_price = zongji_price + parseFloat(qingguan_price)
		}
		
		if(validatePlusFloatWithTwo(daleng_price)){
			zongji_price = zongji_price + parseFloat(daleng_price)
		}
		
		if(validatePlusFloatWithTwo(rengong_price)){
			zongji_price = zongji_price + parseFloat(rengong_price)
		}
		
		if(validatePlusFloatWithTwo(daimai_price)){
			zongji_price = zongji_price + parseFloat(daimai_price)
		}
		
		form.value.zongji_price = zongji_price.toFixed(2)

	}
		 
	watch(()=>form.value.guoqiao_price, (newD) => {
		sumZongji()
	})
	
	watch(()=>form.value.qingguan_price, (newD) => {
		sumZongji()
	})
	
	watch(()=>form.value.daleng_price, (newD) => {
		sumZongji()
	})
	
	watch(()=>form.value.rengong_price, (newD) => {
		sumZongji()
	})
	
	watch(()=>form.value.daimai_price, (newD) => {
		sumZongji()
	})
	
	
	const sumItemZongji = () => {
		let { xiaoliang, danjia, kehumoling } = listForm.value
		let xiaoshou_price = 0
		if(validatePlusFloatWithTwo(xiaoliang) && validatePlusFloatWithTwo(danjia)){
			xiaoshou_price = parseFloat(xiaoliang) * parseFloat(danjia) - parseFloat(kehumoling)
		}
		
		listForm.value.xiaoshou_price = xiaoshou_price.toFixed(2)
	}
	
	watch(()=>listForm.value.xiaoliang, (newD) => {
		sumItemZongji()
	})
	
	watch(()=>listForm.value.danjia, (newD) => {
		sumItemZongji()
	})
	
	watch(()=>listForm.value.kehumoling, (newD) => {
		sumItemZongji()
	})
</script>

<style lang="scss">
	.page-box.readBottom{
		padding-bottom: 180rpx;
	}
	.page-box{
		padding-bottom: 50rpx;
		.order-item-add-box{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #f9f9f9;
			z-index: 99;
			padding: 30rpx;
			padding-bottom: 40rpx;
			box-sizing: border-box;
			
			.order-item-add{
				width: 100%;
				height: 130rpx;
				border: 1px dashed var(--mainColor);
				border-radius: 8rpx;
				color: var(--mainColor);
				font-size: 26rpx;
				box-sizing: border-box;
				// margin-top: 30rpx;
				@include flex-center();
			}
		}
		
		
		.item-popup-box{
			
		}
		
		.order-item-box{
			margin-top: 30rpx;
			.order--item-wrapper{
				margin-bottom: 30rpx;
			}
			.order-item{
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 8rpx;
				
				.pingming{
					font-size: 28rpx;
					color: #16294B;
					margin-bottom: 20rpx;				
				}
				
				.createtime{
					font-size: 26rpx;
					color: #576987;
					margin-bottom: 20rpx;
				}
				
				.baojianshu-xiaoliang-danjia{
					@include flex-start();
					margin-bottom: 15rpx;
					
					.baojianshu,.xiaoliang,.danjia{
						font-size: 26rpx;
						color: #576987;
						margin-right: 20rpx;
					}
				}
				
				.xiaoshou_price{
					font-size: 26rpx;
					color: #576987;
					margin-bottom: 15rpx;
				}
				
				.beizhu{
					font-size: 26rpx;
					color: #576987;
				}
			}
		}
	}	
</style>
